<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h2>段落显示隐藏</h2>
    <button class="btn">切换显示</button>
    <p class="info">
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Placeat id cumque maxime eveniet officia reiciendis aspernatur velit mollitia? Mollitia doloremque ab velit praesentium pariatur
      repudiandae ex distinctio dolore sapiente ea?
    </p>
    <h2>列表的高亮效果切换</h2>
    <ul>
      <li>猪脚饭</li>
      <li>白切鸡</li>
      <li>捆饭</li>
      <li>肠粉</li>
    </ul>
  </body>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js">
    // 设置了 src 之后标签内部的代码不解析了
  </script>
  <script>
    // ● 实现点击按钮显示和隐藏一个段落的功能，分别用原生 JavaScript 和 jQuery 实现
    // 1. 原生
    // const btn = document.querySelector('.btn')
    // const info = document.querySelector('.info')
    // let opt = 1
    // btn.addEventListener('click', function () {
    //   opt = opt === 1 ? 0 : 1
    //   info.style.opacity = opt
    // })

    // 2. jQuery 写法
    // $('.btn').click(function () {
    //   // $('.info').hide()
    //   // 显示-》隐藏，隐藏-》显示
    //   $('.info').toggle()
    // })

    // ● 实现列表元素鼠标移入高亮，移出取消高亮的效果，分别用原生 JavaScript 和 jQuery 实现

    // 1. 原生写法
    const liArr = document.querySelectorAll('li')
    liArr.forEach(item => {
      item.addEventListener('mouseenter', function () {
        // console.log(this)
        this.style.backgroundColor = 'pink'
      })
      item.addEventListener('mouseleave', function () {
        // console.log(this)
        this.style.backgroundColor = 'white'
      })
    })

    // 2.jQuery 写法

    $('li')
      .mouseenter(function () {
        $(this).css({ backgroundColor: 'skyblue' })
      })
      .mouseleave(function () {
        $(this).css({ backgroundColor: 'white' })
      })
  </script>
</html>
